<!--轮播图下方的 icon图标-->
<template>
    <div class="icons">
        <swiper :options="swiperOption">
            <swiper-slide>
                <div class="icon" v-for="item of list" v-bind:key="item.id">
                    <div class="icon-img">
                        <img class="icon-img-content"  v-bind:src="item.imgUrl" alt="">
                    </div>
                    <p class="icon-desc">{{item.desc}}</p>
                </div>
            </swiper-slide>
        </swiper>
    </div>
</template>

<script>
    export default {
        name: "HomeIcons",
        props: { // B.这个属性的定义 用于子组件接收父组件传递的值
          list: Array
        },
        data () {
          return {
            swiperOption:{
              autoplay: false  //禁止icon图标的自动滚动
            }
          }
        }

        //在子组件上定义一个data数据时  这个data它必须是一个函数 且它的返回值才是真正数据的内容
        /*data:function () {
            return {
                "iconList": [{
                    "id": "0001",
                    "imgUrl": "http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png",
                    "desc": "景点门票"
                }, {
                    "id": "0002",
                    "imgUrl": "http://img1.qunarzz.com/piao/fusion/1711/df/86cbcfc533330d02.png",
                    "desc": "滑雪季"
                }, {
                    "id": "0003",
                    "imgUrl": "http://img1.qunarzz.com/piao/fusion/1710/a6/83f636bd75ae6302.png",
                    "desc": "泡温泉"
                }, {
                    "id": "0004",
                    "imgUrl": "http://img1.qunarzz.com/piao/fusion/1611/35/2640cab202c41b02.png",
                    "desc": "动植园"
                }, {
                    "id": "0005",
                    "imgUrl": "http://img1.qunarzz.com/piao/fusion/1611/d0/e09575e66f4aa402.png",
                    "desc": "游乐园"
                }, {
                    "id": "0006",
                    "imgUrl": "http://img1.qunarzz.com/piao/fusion/1611/59/569d3c096e542502.png",
                    "desc": "必游榜单"
                }, {
                    "id": "0007",
                    "imgUrl": "http://img1.qunarzz.com/piao/fusion/1611/17/4bd370f3eb1acd02.png",
                    "desc": "演出"
                }, {
                    "id": "0008",
                    "imgUrl": "http://img1.qunarzz.com/piao/fusion/1611/7f/b1ea3c8c7fb6db02.png",
                    "desc": "城市观光"
                }, {
                    "id": "0009",
                    "imgUrl": "http://img1.qunarzz.com/piao/fusion/1611/a9/ffc620dbda9b9c02.png",
                    "desc": "一日游"
                }]
            }
        },*/
       /* // 计算属性
        computed: {
            // 这是一个算法 主要用于将icon的图标拆分成两页 页码与数据项进行对应  进行轮播
            pages () {
                const pages = []
                if(this.scExistingArr){
                    this.scExistingArr.iconList.forEach((item, index) => {
                        const page = Math.floor(index / 8)
                        if (!pages[page]) {
                            pages[page] = []
                        }
                        pages[page].push(item)
                    })
                    return pages
                }
            }
        }*/
    }
</script>

<style scoped>
    .icons >>> .swiper-container{
     /*   width: 100%;
        overflow: hidden;*/
        height: 0;
        padding-bottom: 50%;
        /*background: grey;*/
    }
    .icon{
        position: relative;
        overflow: hidden;
        float: left;
        width: 25%;
        height: 0;
        padding-bottom: 25%;
        /*background: red;*/
    }
    .icon-img{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: .44rem;
        /*background:blue;*/
        box-sizing: border-box;
        padding: .1rem;
    }
    .icon-img-content{
        height: 100%;
        display: block;
        margin: 0 auto;
    }
    .icon-desc{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: .44rem;
        line-height: .44rem;
        color: #333;
        text-align: center;
    }
</style>
